<template>
  <view class="container-index">
    <view class="content">
      <my-piles v-if="activeTab === 'my-piles'"></my-piles>
      <my-earnings v-if="activeTab === 'my-earnings'"></my-earnings>
    </view>

    <view class="tabs">
      <view class="tab" :class="{ active: activeTab === 'my-piles' }" @click="activeTab = 'my-piles'">我的充电桩</view>
      <view class="tab" :class="{ active: activeTab === 'my-earnings' }" @click="activeTab = 'my-earnings'">我的收益</view>
    </view>
  </view>
</template>

<script>
import MyPiles from './my-piles.vue';
import MyEarnings from './my-earnings.vue';

export default {
  components: {
    MyPiles,
    MyEarnings,
  },
  data() {
    return {
      activeTab: 'my-piles',
    };
  },
};
</script>

<style scoped>
.container-index {
  display: flex;
  flex-direction: column;
  height: 95vh;
  padding: 0;
}
.content {
  flex: 1;
  overflow-y: auto;
  padding: 20rpx;
}
.tabs {
  display: flex;
  justify-content: space-around;
  border-top: 1px solid #eee;
  background-color: #fff;
}
.tab {
  padding: 20rpx 20rpx;
  cursor: pointer;
  flex: 1;
  text-align: center;
}
.tab.active {
  border-top: 2px solid #007aff;
  color: #007aff;
}
</style>